<!DOCTYPE html>
<head>
	<title>Header</title>
	<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
	<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.item0{ background: #bbdefb; }
		.item1{ background: #90caf9; }
		.item2{ background: #64b5f6; }
		.item3{ background: #42a5f5; }

	</style>
</head>
<body>

<div id="testA" style='width:550px; height:350px;'></div>
<script type="text/javascript" charset="utf-8">

	webix.ready(function(){
		//plain json data, based on objects
		webix.ui({
			container:"testA",
			rows:[
				{
					id: "tmap",
					view:"treemap",
					select: true,
					value: "#views#",
					headerTemplate: "#category#",
					activeItem: true,
					type:{
						cssClass: function(item){
							var css,
								comments = item.comments;

							if(!this.isBranch(item.id)){
								if(comments > 30)
									css = "item3";
								else if(comments > 20)
									css = "item2";
								else if(comments > 10)
									css = "item1";
								else
									css = "item0";
							}
							return css;
						},
						template: function(item){
							return item.category|| "";
						}
					},
					// a branch for display
					branch: "2.1",
					url: "data/data_path.json"
				},
				{
					view: "checkbox", label: "Show Header", value: 1, labelWidth: 100, on:{
						onChange: function(value){
							$$("tmap").config.header = value?true:false;
							$$("tmap").refresh();
						}
					}
				}
			]

		});


	});
</script>
</body>
</html>